<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui"
	template="/templates/template.xhtml" xmlns:eq="http://www.equus.com.br/facelets/">

	<f:metadata>
		<f:event type="preRenderView" listener="#{imagemAnimalBean.verificarAcesso}" />
	</f:metadata>

	<ui:define name="body">
		<h:form id="form" prependId="false">
			<h:panelGrid id="tagOs" width="100%">
				<eq:animalSemImg animal="#{imagemAnimalBean.model}" />
			</h:panelGrid>
			<p:fieldset legend="#{imagemAnimalBean.qualifiedName}" id="fieldPrincipal">

				<p:fileUpload mode="advanced" auto="true" fileUploadListener="#{imagemAnimalBean.handleFileUpload}" width="100%"
					label="Anexar..." cancelLabel="Cancelar" uploadLabel="Enviar" sizeLimit="#{const.tamArquivoByte}"
					invalidSizeMessage="Tamanho limite excedido" allowTypes="/(\.|\/)(jpeg|gif|bpm|jpg|png)$/"
					invalidFileMessage="Arquivo inválido" update="dataTableImagens,imagemPanel" multiple="true" />


				<p:dataTable var="lista" id="dataTableImagens" emptyMessage="Não há imagem(s) cadastradas" update="fieldImagem"
					styleClass="coluna100" value="#{imagemAnimalBean.imagensToList}"
					rowStyleClass="#{empty rowIx or rowIx mod 2 ne 0 ? 'linhaImpar' : 'linhaPar'}" rowIndexVar="rowIx">
					<p:column headerText="Nome" style="width:80%">
						<h:commandLink value="#{lista.nomeImagem}">
							<p:fileDownload value="#{lista.content}" />
						</h:commandLink>
					</p:column>
					<p:column style="width:10%;text-align:center;" headerText="Ação">
						<p:commandLink style="font-size: 8px;" process="@this" oncomplete="confirmationImg.show()">
							<h:graphicImage library="design/imagem" name="icone-excluir.png" />
							<f:setPropertyActionListener target="#{imagemAnimalBean.imagemExcluir}" value="#{lista}" />
						</p:commandLink>
					</p:column>
				</p:dataTable>
				<br />

				<h:panelGrid columns="1" width="100%" id="imagemPanel">
					<p:toolbar rendered="#{!empty imagemAnimalBean.model.listaUrls}" style="width: 800px; height: 630px;">
						<p:toolbarGroup>
							<h:panelGrid columns="2" width="5%">
								<p:commandButton type="button" onclick="switcher.previous();" icon="ui-icon-circle-triangle-w" />
								<p:commandButton type="button" onclick="switcher.next();" icon="ui-icon-circle-triangle-e" />
							</h:panelGrid>
							<p:imageSwitch effect="shuffle" widgetVar="switcher" slideshowSpeed="6000" slideshowAuto="true">
								<ui:repeat value="#{imagemAnimalBean.model.listaUrls}" var="image">
									<p:graphicImage value="/imagemServlet?file=#{image}" style="width: 800px; height: 600px;" />
								</ui:repeat>
							</p:imageSwitch>
						</p:toolbarGroup>
					</p:toolbar>
				</h:panelGrid>

				<p:confirmDialog message="Confirma a Exclusão" appendToBody="true" header="Exclusão" severity="alert"
					widgetVar="confirmationImg">

					<h:panelGrid columns="2">
						<p:commandButton value="Sim" update="imagemPanel,dataTableImagens" oncomplete="confirmationImg.hide()"
							actionListener="#{imagemAnimalBean.deleteImagem}" immediate="true" />
						<p:commandButton value="Não" onclick="confirmationImg.hide();" />
					</h:panelGrid>
				</p:confirmDialog>

			</p:fieldset>
			<br />
			<p:toolbar>
				<p:toolbarGroup align="left">
					<p:commandButton value="Voltar" immediate="true" ajax="false" action="pesquisarAnimal.jsf" />
				</p:toolbarGroup>
			</p:toolbar>
			<br />
		</h:form>
	</ui:define>
</ui:composition>